<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .silver .ui-colorpicker-container {
                background-image: url(../images/colorpicker/silver_background.png);
            }
            .silver .ui-colorpicker_hex {
                background-image: url(../images/colorpicker/silver_hex.png);
            }
            .silver .ui-colorpicker_rgb_r {
                background-image: url(../images/colorpicker/silver_rgb_r.png);
            }
            .silver .ui-colorpicker_rgb_g {
                background-image: url(../images/colorpicker/silver_rgb_g.png);
            }
            .silver .ui-colorpicker_rgb_b {
                background-image: url(../images/colorpicker/silver_rgb_b.png);
            }
            .silver .ui-colorpicker_hsb_s {
                background-image: url(../images/colorpicker/silver_hsb_s.png);
            }
            .silver .ui-colorpicker_hsb_h {
                background-image: url(../images/colorpicker/silver_hsb_h.png);
            }
            .silver .ui-colorpicker_hsb_b {
                background-image: url(../images/colorpicker/silver_hsb_b.png);
            }
            .silver .ui-colorpicker_submit {
                background-image: url(../images/colorpicker/silver_submit.png);
            }
        </style>
    </ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Color Picker</h1>
		<div class="entry">
			<p>Gone are the days to manually enter in hex codes to select colors.</p>
		
			<h:form>
			
				<p:panel header="Colors">
					<h:panelGrid columns="2" cellpadding="10">
						<h:outputText value="Inline: " />
						<p:colorPicker value="#{colorBean.color1}" mode="inline" />

                        <h:outputText value="Styled: " />
						<p:colorPicker value="#{colorBean.color2}" styleClass="silver" mode="inline" />

                        <h:outputText value="Popup: " />
						<p:colorPicker value="#{colorBean.color3}" widgetVar="picker"/>
					</h:panelGrid>

                    <p:separator />

                    <p:commandButton value="Submit" oncomplete="dlg.show()" update="grid" />
				</p:panel>

                <p:dialog modal="true" widgetVar="dlg" showEffect="fade" hideEffect="fade" header="Selected Colors">
                    <h:panelGrid columns="2" id="grid">
                        <h:outputText value="Color 1: " />
                        <h:outputText value="#{colorBean.color1}" style="background-color:\##{colorBean.color1}"/>

                        <h:outputText value="Color 2: " />
                        <h:outputText value="#{colorBean.color2}" style="background-color:\##{colorBean.color2}"/>

                        <h:outputText value="Color 3: " />
                        <h:outputText value="#{colorBean.color3}" style="background-color:\##{colorBean.color3}"/>
                    </h:panelGrid>
                </p:dialog>
				
			</h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="colorPicker.xhtml">
                <pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:panel header="Colors"&gt;
        &lt;h:panelGrid columns="2" cellpadding="10"&gt;
            &lt;h:outputText value="Inline: " /&gt;
            &lt;p:colorPicker value="\#{colorBean.color1}" mode="inline" /&gt;

            &lt;h:outputText value="Styled: " /&gt;
            &lt;p:colorPicker value="\#{colorBean.color2}" styleClass="silver" mode="inline" /&gt;

            &lt;h:outputText value="Popup: " /&gt;
            &lt;p:colorPicker value="\#{colorBean.color3}" widgetVar="picker"/&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:separator /&gt;

        &lt;p:commandButton value="Submit" oncomplete="dlg.show()" update="grid @parent" /&gt;
    &lt;/p:panel&gt;

    &lt;p:dialog modal="true" widgetVar="dlg" showEffect="fade" hideEffect="fade" header="Selected Colors"&gt;
        &lt;h:panelGrid columns="2" id="grid"&gt;
            &lt;h:outputText value="Color 1: " /&gt;
            &lt;h:outputText value="\#{colorBean.color1}" style="background-color:\\#\#{colorBean.color1}"/&gt;

            &lt;h:outputText value="Color 2: " /&gt;
            &lt;h:outputText value="\#{colorBean.color2}" style="background-color:\\#\#{colorBean.color2}"/&gt;

            &lt;h:outputText value="Color 3: " /&gt;
            &lt;h:outputText value="\#{colorBean.color3}" style="background-color:\\#\#{colorBean.color3}"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
                </pre>
                </p:tab>

                <p:tab title="ColorBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

public class ColorBean {

	private String color1;

    private String color2;

    private String color3;

    public String getColor1() {
        return color1;
    }

    public void setColor1(String color1) {
        this.color1 = color1;
    }

    public String getColor2() {
        return color2;
    }

    public void setColor2(String color2) {
        this.color2 = color2;
    }

    public String getColor3() {
        return color3;
    }

    public void setColor3(String color3) {
        this.color3 = color3;
    }
}
                    </pre>
                </p:tab>

            </p:tabView>

		</div>

	</ui:define>
</ui:composition>